<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="lay/css/layui.css" />
		<style type="text/css">
			body{
				height: 1200px;
			}
			#demo{
				margin: 30px 100px;
			}
			.descripttion{
				width: 1000px;
				margin: 50px;
			}
			body>ul{
				display: inline-block;
				width: 400px;
				margin: 20px;
			}
		</style>
	</head>

	<body>



		<ul id="demo"></ul>


		<script src="layui.js" charset="utf-8"></script>
		<script>
			layui.use('tree', function() {
				var tree = layui.tree({
					elem: '#demo', //指定元素，生成的树放到哪个元素上
					check: 'checkbox', //勾选风格
					skin: 'as', //设定皮肤
					drag: true,//点击每一项时是否生成提示信息
					checkboxName: 'aa[]',//复选框的name属性值
					checkboxStyle: "",//设置复选框的样式，必须为字符串，css样式怎么写就怎么写
					click: function(item) { //点击节点回调
						console.log("item")
					},
					onchange: function (){//当当前input发生变化后所执行的回调
						console.log(this);
					},
					nodes: [ //节点
						{
							name: '常用文件夹', //节点名称
						//	spread: true, //是否是展开状态，true为展开状态						
							href: "http://www.baidu.com",//设置节点跳转的链接，如果不设置则不会跳转
							target: "_self",//节点链接打开方式
							alias: 'changyong',
							data: {//为元素添加额外数据，即在元素上添加data-xxx="yyy"，可选
								nodeName: "常用文件夹",
								alias: "changyong"
							},
							checkboxValue: 1,//复选框的值
							checked: true,//复选框默认是否选中
							children: [{
								name: '所有未读',
								alias: 'weidu',
								checked: true,
								checkboxValue: 2
							}, {
								name: '置顶邮件',
							}, {
								name: '标签邮件',
								checked: false,
								checkboxValue: 3
							}]
						}, {
							name: '我的邮箱',
							checked: true,
							spread: true,
							data: {
								nodeName: "我的邮箱",
								alias: "email"
							},
							children: [{
								name: 'QQ邮箱',
								checked: true,
								checkboxValue: 4,
								spread: true,
								children: [{
									name: '收件箱',
									checked: false,
									checkboxValue: 5,
									children: [{
										name: '所有未读',
										checked: false,
										checkboxValue: 6,
										children: [{
											name: '一周未读',
											checked: false,
											checkboxValue: 6
										}]
									}, {
										name: '置顶邮件',
										checked: false,
										checkboxValue: 7
									}, {
										name: '标签邮件',
										checked: false,
										checkboxValue: 8
									}]
								}, {
									name: '已发出的邮件',
									checked: false,
									checkboxValue: 9
								}, {
									name: '垃圾邮件',
									checked: false,
									checkboxValue: 10
								}]
							}, {
								name: '阿里云邮',
								checked: true,
								checkboxValue: 11,
								children: [{
									name: '收件箱',
									checked: true,
									checkboxValue: 12
								}, {
									name: '已发出的邮件',
									checked: true,
									checkboxValue: 13
								}, {
									name: '垃圾邮件',
									checked: true,
									checkboxValue: 14
								}]
							}]
						}
					]
				});
			});
		</script>

	</body>

</html>